<template>
    <div class="hello">
        <img alt="Vue logo" src="@/assets/img/logo.png" />
        <h1>Welcome to Your Vue.js App</h1>
        <h3>base-url：{{ baseUrl }}</h3>
        <div class="icon_svg" v-dragable>
            以下是icon-svg
            <icon-svg name="see" />
            <icon-svg name="user" />
        </div>
        <div>
            <el-button v-preventReClick @click="btnClick">按钮</el-button>
            <el-button v-copy="'12344321'">一键复制</el-button>
        </div>
        <div style="width:150px;border:1px solid yellow;">
            <span v-textOver='10'>我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</span>
        </div>
        <div style="width:200px;height:200px;border:1px solid yellow;position: absolute;">
            <div style="position: relative;top:0;left:0;" v-dragable>我可以被拖动</div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'HelloWorld',
    data() {
        return {
            baseUrl: window.SITE_CONFIG['baseUrl'],
        };
    },
    created() {
        this.$http({
            url: `/code`,
            method: 'get',
        }).then(res => {
            this.$message.success('123');
            console.log(res);
        });
    },
    methods: {
        btnClick() {
            console.log('被点击了');
        },
    },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.hello {
    .icon_svg {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}
</style>
